// 设计系统 - 主题配置
// ================================
// 统一的设计令牌定义，确保整个应用的视觉一致性

// ==============================================================================
// 品牌色彩 Brand Colors
// ==============================================================================

// 主色调 - Primary Colors
$primary: #1890ff;
$primary-1: #e6f7ff;  // 最浅
$primary-2: #bae7ff;
$primary-3: #91d5ff;
$primary-4: #69c0ff;
$primary-5: #40a9ff;
$primary-6: #1890ff;  // 标准色
$primary-7: #096dd9;
$primary-8: #0050b3;
$primary-9: #003a8c;
$primary-10: #002766; // 最深

// 便捷访问
$primary-light: $primary-5;
$primary-dark: $primary-7;

// 功能色彩 - Functional Colors
$success: #52c41a;
$success-light: #b7eb8f;
$success-dark: #389e0d;

$warning: #faad14;
$warning-light: #ffe58f;
$warning-dark: #d48806;

$error: #ff4d4f;
$error-light: #ffccc7;
$error-dark: #cf1322;

$info: #13c2c2;
$info-light: #87e8de;
$info-dark: #08979c;

// ==============================================================================
// 中性色彩 Neutral Colors
// ==============================================================================

$white: #ffffff;
$black: #000000;

// 灰度色阶 (更精细的层次)
$gray-50: #fafafa;
$gray-100: #f5f5f5;
$gray-150: #f0f0f0;  // 新增
$gray-200: #e8e8e8;  // 调整
$gray-250: #e0e0e0;  // 新增
$gray-300: #d9d9d9;
$gray-400: #bfbfbf;
$gray-500: #8c8c8c;
$gray-600: #595959;
$gray-700: #434343;
$gray-800: #262626;
$gray-850: #1a1a1a;  // 新增
$gray-900: #141414;  // 调整
$gray-950: #0a0a0a;  // 新增

// 语义化别名
$page-bg: $gray-100;
$content-bg: $white;
$border-color: $gray-300;
$border-light: $gray-200;
$border-dark: $gray-400;
$text-primary: $gray-900;
$text-secondary: $gray-600;
$text-tertiary: $gray-500;
$text-disabled: $gray-400;

// 渐变色
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
$gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
$gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

// 圆角
$radius-xs: 2px;
$radius-sm: 4px;
$radius-md: 6px;
$radius-lg: 8px;
$radius-xl: 12px;
$radius-2xl: 16px;
$radius-full: 50%;

// 间距
$space-xs: 4px;
$space-sm: 8px;
$space-md: 12px;
$space-lg: 16px;
$space-xl: 20px;
$space-2xl: 24px;
$space-3xl: 32px;
$space-4xl: 40px;

// 字体大小
$text-xs: 10px;
$text-sm: 12px;
$text-base: 14px;
$text-lg: 16px;
$text-xl: 18px;
$text-2xl: 20px;
$text-3xl: 24px;
$text-4xl: 28px;

// 字重
$font-light: 300;
$font-normal: 400;
$font-medium: 500;
$font-semibold: 600;
$font-bold: 700;

// 阴影
$shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.03);
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

// 边框
$border-width: 1px;
$border-color: $gray-200;
$border-hover: $gray-300;

// Z-index层级
$z-dropdown: 1000;
$z-sticky: 1020;
$z-fixed: 1030;
$z-modal-backdrop: 1040;
$z-modal: 1050;
$z-popover: 1060;
$z-tooltip: 1070;

// 过渡动画
$transition-base: all 0.3s ease;
$transition-fast: all 0.15s ease;
$transition-slow: all 0.5s ease;

// 状态色扩展
$status-colors: (
  'primary': $primary,
  'success': $success,
  'warning': $warning,
  'error': $error,
  'info': $info
);

// 响应式断点
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px
);

// Mixin - 状态色生成器
@mixin status-variant($color) {
  color: $color;
  
  &:hover {
    color: darken($color, 10%);
  }
  
  &:active {
    color: darken($color, 15%);
  }
}

// Mixin - 按钮样式
@mixin button-variant($bg-color, $text-color: $white) {
  background-color: $bg-color;
  color: $text-color;
  border: 1px solid $bg-color;
  
  &:hover {
    background-color: lighten($bg-color, 5%);
    border-color: lighten($bg-color, 5%);
  }
  
  &:active {
    background-color: darken($bg-color, 5%);
    border-color: darken($bg-color, 5%);
  }
  
  &:disabled {
    background-color: $gray-300;
    border-color: $gray-300;
    color: $gray-500;
    cursor: not-allowed;
  }
}

// Mixin - 卡片样式
@mixin card-variant($shadow: $shadow-sm) {
  background-color: $white;
  border-radius: $radius-lg;
  box-shadow: $shadow;
  border: 1px solid $border-color;
  overflow: hidden;
  
  &:hover {
    box-shadow: $shadow-md;
    border-color: $border-hover;
  }
}

// Mixin - Flex布局
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@mixin flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

// Mixin - 文本截断
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Mixin - 响应式
@mixin responsive($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}